<template>
  <div class="receiptwrapper">
    <div class="shop-title">
      『{{shop.name}}』
    </div>
    <div class="goods_wrapper">
      <ul>
        <li class='shopcart-item' v-for='(food,index) in foodsInCart' v-bind:key="index">
          <div class='food-wrapper'>
            <span class="food-name">{{food.name}}</span>
            <div class="price-wrapper">
              <div class="food-count">×{{food.count}}</div>
              <span class="total-price">￥{{food.price * food.count}}</span>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="fee-wrapper">
      <div class='pack-wrapper'>
        <span class="pack-title">餐盒费</span>
        <div class="pack-price-wrapper">
          <span class="pack-price">￥{{shop.deliveryPrice}}</span>
        </div>
      </div>
    </div>

    <div class="total-wrapper">
      <span class="total-title">小计</span>
      <div class="total-my-wrapper">
        <span class="total-my">￥{{totalMy}}</span>
      </div>
    </div>

  </div>
</template>

<script type="text/ecmascript-6">
  /**
   * 结算页小票模块
   * */
  export default {
    name: 'receipt',
    props: {
      foodsInCart: {
        type: Array,
        default() {
          return [];
        }
      },
      shop: {
        type: Object,
        default() {
          return null;
        }
      }
    },
    computed: {
      totalMy() {
        let total = 0;
        this.foodsInCart.forEach((food) => {
          total += food.price * food.count;
        });
        if (this.shop.deliveryPrice) {
          total += this.shop.deliveryPrice;
        }
        return total;
      }
    }
  };
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../common/stylus/mixin.styl"
  .receiptwrapper
    margin 12px
    box-shadow: 1px 1px 10px #888888;
    background-color #fff
    display flex
    flex-direction column
    justify-content center
    align-items center
    .shop-title
      height 40px
      font-weight 700
      font-size 20px
      line-height 40px
      text-align: center
      width 90%
    .goods_wrapper
      background-color #fff
      width 95%
      .shopcart-item
        border-after-1px(rgba(7, 17, 27, 0.1))
        .food-wrapper
          height 40px
          margin-top 5px
          .food-name
            color rgb(7, 17, 27)
            height 40px
            font-size 14px
            display inline-block
            line-height 40px
          .price-wrapper
            display inline-block
            position absolute
            right 0px
            line-height 40px
            height 40px
            font-size 14px
            font-weight 400
            color rgb(7, 17, 27)
            .total-price
              color rgb(240, 20, 20)
              padding-left 18px
              margin-right 12px
              display inline-block
            .food-count
              display inline-block
    .fee-wrapper
      background-color #fff
      width 95%
      .pack-wrapper
        margin-top 5px
        height 40px
        border-after-1px(rgba(7, 17, 27, 0.1))
      .pack-title
        color rgb(7, 17, 27)
        height 40px
        font-size 14px
        display inline-block
        line-height 40px
      .pack-price-wrapper
        display inline-block
        position absolute
        right 0px
        color rgb(7, 17, 27)
        .pack-price
          color rgb(240, 20, 20)
          line-height 40px
          height 40px
          font-size 14px
          font-weight 400
          padding-left 18px
          margin-right 12px
          display inline-block
    .total-wrapper
      background-color #fff
      width 95%
      height 40px
      margin-top 5px
      margin-bottom 5px
      line-height 40px
      .total-title
        color rgb(7, 17, 27)
        font-size 20px
        font-weight 500
        display inline-block
      .total-my-wrapper
        position absolute
        right 20px
        display inline-block
        .total-my
          color rgb(240, 20, 20)
          line-height 40px
          height 40px
          font-size 20px
          font-weight 500
          padding-left 18px
          margin-right 12px
          display inline-block
</style>
